<script lang="ts">
import { defineComponent, reactive, onMounted } from 'vue';
import { message, notification } from 'ant-design-vue';
import { NotificationOutlined } from '@ant-design/icons-vue';
import 'ant-design-vue/dist/antd.css';
import {reportList, userService} from '../../../api/user';
import Title from 'ant-design-vue/lib/typography/Title';
import { Item } from 'ant-design-vue/lib/menu';
import { info } from 'sass';

import type {
  ResponseData
} from "../../../api/user"

let userJSON=localStorage.getItem("user")
//@ts-ignore
let userobj=JSON.parse(userJSON)

const notificationData = reactive({
  titleData:[],
  title:'',
  content:''
})
const getTitle = async() => {
  const response = await userService.getTitle()
  notificationData.titleData = response.data
  console.log(notificationData.titleData)
}
//@ts-ignore
const getContent = async(item) =>{
  notificationData.title = item
  const response = await userService.getContent(notificationData.title)
  console.log(response.data)
  notificationData.content = response.data
  notification.open({
    message:notificationData.title,
    description:notificationData.content,
    duration:0,
  });
}


 reportList().then((res:ResponseData)=>{
   console.log(res.msg)
 })


console.log('>>>>>>>',)
export default defineComponent({
  setup() {
    onMounted(() => {
      getTitle()
    })
    const user = reactive({
      name: "",
    })
    return {
      notificationData,getContent,
      user,
      userobj,
    };
  },
});
</script>

<template> 
  <div class="mainBack ">
    <div style="position: absolute;">
    </div>
  </div>

  <template v-for="(item) in user">
    <span class="helloMsg">您好，{{ userobj.name }}医生！欢迎使用云电子胶片系统！</span>
  </template>

  <a-list class="notification" item-layout="horizontal" :data-source="notificationData.titleData">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta>
          <template #title>
            <a @click="getContent(item)">{{ item }}</a>
          </template>
          <template #avatar>
            <NotificationOutlined @click="getContent(item)"/>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>

<style>
.mainBack {
  height: 70%;
  width: 35%;
  background-image: url("src/assets/mainBack.png");
  background-size: cover;
  position: absolute;
  z-index: 0;
}

.helloMsg {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.notification {
  position: absolute;
  height: auto;
  width: 450px;
  top: 150px;
  right: 80px;
  border-top: 2px dashed darkblue;
  border-bottom: 2px dashed darkblue;
}
</style>